import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin } from 'antd';
import moment from 'moment';
import myStyle from './index.less';
import { fixedNum } from '../../../utils/utils';

@connect(({ investmentCalendarM, loading }) => ({
  investmentCalendarM,
  loading,
}))
@Form.create()
export default class CashRemainC extends PureComponent {
  state = {
    date: '', //当前日期
    portfolioCodeList: undefined, //组合list
    data: {}, //现金余额数据
    currentTime: '',
  };

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (
      this.state.date != nextProps.date ||
      JSON.stringify(nextProps.portfolioCodeList) !== JSON.stringify(this.state.portfolioCodeList) ||
      this.state.currentTime != nextProps.currentTime
    ) {
      this.setState(
        {
          portfolioCodeList: nextProps.portfolioCodeList,
          date: nextProps.date,
          currentTime: nextProps.currentTime,
        },
        () => {
          this.queryCashRemain();
        },
      );
    }
  }
  // 查询现金余额
  queryCashRemain = () => {
    const { portfolioCodeList, date } = this.state;
    this.props.dispatch({
      type: 'investmentCalendarM/queryCashRemain',
      payload: {
        portfolioCode: portfolioCodeList,
        date: moment(date).format('YYYYMMDD'),
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            data: data || {},
          });
        } else {
          this.setState({
            data: {},
          });
        }
      },
    });
  };

  render() {
    const { loading } = this.props;
    const { data } = this.state;
    return (
      <div className={myStyle.cashRemain}>
        <Spin spinning={loading.effects['investmentCalendarM/queryCashRemain']} tip='加载中...'>
          <Row>
            <Col span={24} className='cashRow'>
              <span>T+0可用:</span>
              <span>{data.tZeroAvailableFund || data.tZeroAvailableFund === 0 ? fixedNum(data.tZeroAvailableFund, 2) : '--'}</span>
            </Col>
            <Col span={24} className='cashRow'>
              <span>T+1可用:</span>
              <span>{data.tOneAvailableFund || data.tOneAvailableFund === 0 ? fixedNum(data.tOneAvailableFund, 2) : '--'}</span>
            </Col>
          </Row>
          <Row>
            <Col span={24} className='cashRow'>
              <span>买入未交收金额:</span>
              <span>{data.rkyhj || data.rkyhj === 0 ? fixedNum(data.rkyhj, 2) : '--'}</span>
            </Col>
            <Col span={24} className='cashRow'>
              <span>卖出未交收金额:</span>
              <span>{data.ckyhj || data.ckyhj === 0 ? fixedNum(data.ckyhj, 2) : '--'}</span>
            </Col>
          </Row>
          <Row>
            <Col span={24} className='cashRow'>
              <span>流入金额:</span>
              <span>{data.inflowAmt || data.inflowAmt === 0 ? fixedNum(data.inflowAmt, 2) : '--'}</span>
            </Col>
            <Col span={24} className='cashRow'>
              <span>流出金额:</span>
              <span>{data.outflowAmt || data.outflowAmt === 0 ? fixedNum(data.outflowAmt, 2) : '--'}</span>
            </Col>
          </Row>
          <Row>
            <Col span={24} className='cashRow'>
              <span>轧差金额:</span>
              <span>{data.netting || data.netting === 0 ? fixedNum(data.netting, 2) : '--'}</span>
            </Col>
          </Row>
        </Spin>
      </div>
    );
  }
}
